<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map class="maps" :latitude="latitude" :longitude="longitude" scale="16" :markers="marker" show-location="true"
				 @markertap="markers" :scale="12" :polyline="polyline">
				</map>
			</view>
			<view class="transport" v-if="data.transport.length > 0">
				<view class="transport-title" v-for="(name,index) in data.transport" :key="index">
					<view class="transport-name">
						<text>{{name}}</text>
					</view>
					<view v-if="index!=data.transport.length-1" class="triangle">
						<text class="triangle_border_right"></text>
					</view>
				</view>
				<view>
					<view class='tags'>
						<text class="text">{{data.duration}}</text>
						<text class="roundes"></text>
					</view>
					<view class='tags'>
						<text class="text">{{data.via_num}}站</text>
						<text class="roundes"></text>
					</view>
					<view class='tags' v-if="data.cost.length > 0">
						<text class="text">{{data.cost}}元</text>
						<text class="roundes"></text>
					</view>
					<view class="tags">
						<text class="text">{{data.transit}}</text>
					</view>
				</view>
			</view>
			<!-- 路线列表-->
			<view class="centre-container">
				<view v-for="(item,index) in data.segments" :keywords="index">
					<view class="conter-walking-top">
						<!--起点-->
						<view v-if="item.bus.buslines.length > 0 ">
							<view v-if="index == 0" class="start-origin start-title">
								<text class="greencircle green"></text>
								<text class="route-font route-left">
									{{data.start_point}}
								</text>
							</view>
							<view v-if="index != 0" class="start-origin route-site">
								<view class="dot-secend">
									<image class="icon-rotate" src="../../static/icon_transfer.png"></image>
								</view>
								<text class="route-font route-margin-left">
									{{ data.segments[index-1].bus.buslines[0].arrival_stop.name}} <text style="padding-left: 5px;">{{ data.segments[index-1].entrance.name || data.segments[index-1].exit.name ? '地铁站' : '公交站'}}</text>
								</text>
							</view>
							<text class="route-margin-left" v-if="index != 0 && data.segments.length-1 != index && !item.entrance.name">同站换乘</text>
							<view v-if="item.walking.distance && item.walking.distance > 10">
								<text v-if="data.segments[index-1].bus.buslines[0].arrival_stop.name != item.bus.buslines[0].departure_stop.name" class="duration route-margin-left">
									步行{{item.walking.distance}}米
									</text>
								<view v-if="data.segments[index-1].bus.buslines[0].arrival_stop.name != item.bus.buslines[0].departure_stop.name" class="start-origin route-padding-bottom">
									<text v-if ="index == 0" class="dot"></text>
									<text class="route-font route-padding-left" :style="index != 0 ? 'margin-left:10px':''">
										{{item.bus.buslines[0].departure_stop.name}} <text style="padding-left: 5px;">{{item.entrance.name || item.exit.name ? '地铁站' : '公交站'}}</text>
										<text style="padding-left: 5px;">{{item.entrance.name ? `(${item.entrance.name})` : ''}}</text>
									</text>
								</view>
							</view>
						</view>
					</view>
					<view class="route-bus" v-if="item.bus.buslines.length > 0" :class="[item.walking.distance && item.walking.distance > 10 ? 'marginMinus':'marginTop']">
						<view v-for="(row,idx) in item.bus.buslines">
							<view class="route-padding route-transport" v-if="status[index].key == idx" :data-keywords="row.id">
								<view class="transit-no" @click="showPopup('bottom',item.bus.buslines,index)">
									<text style="color: #FFFFFF;">
										{{row.direction}}
										<text class="triangle_border_down" v-if="item.bus.buslines.length > 1"></text>
									</text>
								</view>
								<view class="transit-news">开往{{row.end}}方向<text style="word-wrap:break-word">(下一站: {{row.via_stops.length > 0 ? row.via_stops[0].name : row.arrival_stop.name }})</text></view>
								<view @click="explicit" :data-keywords="index">
									<view v-if="status[index].type == 'close'">
										<text style="color: #007AFF;">{{(row.via_stops.length + 1)}}站</text>
										<text style="padding-left: 10px;">({{row.duration}}分钟)</text>
										<image style="width: 10px;height: 10px;margin-left: 4px;display: inline-block;position: absolute;margin-top: 8px;" src="../../static/icon_unfold.png"></image>
									</view>
									<view v-if="status[index].type == 'open'">
										<view>
											{{row.departure_stop.name}} 上车
										</view>
										<view v-for="(row,index) in row.via_stops">
											{{row.name}}
										</view>
										<view>
											{{row.arrival_stop.name}} 下车
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="index == data.segments.length -1" class="conter-walking-top">
						<view v-if="data.isShow" class="start-origin route-padding-bottom route-site-end" style="margin-top: 10px;">
							<text v-if="index == 0 || index == data.segments.length-1" class="dot"></text>
							<text class="route-font route-padding-left">
								{{data.arrival_stop.name}}
								<text v-if="item.walking.distance" style="padding-left: 5px;">{{data.segments[index-1].entrance.name ? '地铁站' : '公交站'}}</text>
								<text v-else style="padding-left: 5px;">{{data.segments[index].entrance.name ? '地铁站' : '公交站'}}</text>
								<text v-if="item.walking.distance" style="padding-left: 5px;">{{data.segments[index-1].exit.name ? `(${data.segments[index-1].exit.name})` : ''}}</text>
							    <text v-else style="padding-left: 5px;">{{data.segments[index].exit.name ? `(${data.segments[index].exit.name})` : ''}}</text>
							</text>
						</view>
						<text v-if="data.isShow" class="duration route-margin-left">步行{{item.walking.distance}}米</text>
						<view class="start-origin end-title" :style="data.isShow ? '': 'margin-top: 20px;'">
							<text class="route-roundes"></text>
							<text class="route-font route-left">
								{{data.end_point}}
							</text>
						</view>
					</view>
				</view>
			</view>
			<uni-popup :show="type === 'bottom'" position="bottom" mode="fixed" @hidePopup="hiddenPopup('')">
				<view class="bottom-title">
					<text>可乘坐车次</text>
				</view>
				<view class="bottom-content">
					<view @click="checkout" class="bottom-content-box" v-for="(rowData,index) in buslines" :data-keywords="index">
						<text class="bottom-content-bus">{{rowData.direction}}</text>
					</view>
					<view @click="clean" class="bottom-content-cealen">取消</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config.js';
	import amapFile from '../../common/amap-wx.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				polyline: [],
				poisdatas: [{}, {}, {}],
				title: 'map',
				data: {},
				status: {
					0: {
						type: 'close',
						key: 0
					},
					1: {
						type: 'close',
						key: 0
					},
					2: {
						type: 'close',
						key: 0
					},
					3: {
						type: 'close',
						key: 0
					}
				},
				latitude: "",
				longitude: "",
				type: "",
				buslines: [],
				keywords: 0,
				marker:[]
			}
		},
		//计算属性
		computed: {
			...mapState(["place","transportList",'markers']),
		},
		onLoad(options) {
			this.showLoading();
			let path = this.place.location.split(',');
			this.longitude = path[0];
			this.latitude = path[1];
			this.initDate(options);
			this.hideLoading();
		},
		methods: {
			...mapMutations(['showLoading', 'hideLoading']),
			initDate: function(options) {
				let arry = this.$store.state.transportList;
				let data = arry[options.idx];
				this.data = data;
				this.routeBus();
			},
			explicit: function(e) {
				let index = e.currentTarget.dataset.keywords;
				let data = this.status;
				if (data[index].type == 'open') {
					data[index].type = 'close';
				} else {
					data[index].type = 'open';
				}
				this.status = data;
			},
			showPopup(type, buslines, key) {
				if (buslines.length > 1) {
					this.type = type;
					this.buslines = buslines;
					this.keywords = key;
				}
			},
			hiddenPopup(type) {
				this.type = type;
			},
			dateFormat: function(time) {
				return time.slice(0, 2) + ':' + time.slice(2)
			},
			checkout: function(e) {
				let index = e.currentTarget.dataset.keywords;
				let data = this.status;
				data[this.keywords].key = index;
				this.status = data;
				this.type = "";
				this.routeBus();
			},
			routeBus: function() {
				let points = [],
					_self = this,
					arr = [],
					data = this.data;
				for (let i = 0; i < data.segments.length; i++) {
					let item = data.segments[i];
					if (item.walking.length > 0) {
						for (let j = 0; j < item.walking.steps.length; j++) {
							let poLen = item.walking.steps[j].polyline.split(';');
							for (var k = 0; k < poLen.length; k++) {
								points.push({
									longitude: parseFloat(poLen[k].split(',')[0]),
									latitude: parseFloat(poLen[k].split(',')[1])
								})
							}
						}
					}
					if (item.bus.buslines.length > 0) {
						let poLen = item.bus.buslines[this.status[i].key].polyline.split(';');
						for (var k = 0; k < poLen.length; k++) {
							points.push({
								longitude: parseFloat(poLen[k].split(',')[0]),
								latitude: parseFloat(poLen[k].split(',')[1])
							})
						}
						if(i != 0) {
						let transfer = item.bus.buslines[this.status[i].key].departure_stop.location.split(',');
							arr.push({
									iconPath: "../../static/icon_transfer.png",
									id: 0,
									latitude: transfer[1],
									longitude:transfer[0],
									width: 23,
									height: 23,
									anchor:{x: .5, y: 1}
								}); 
						}
					}
				}
				this.polyline = [{
					points: points,
					color: "#4388FF",
					width: 8,
					dottedLine: false,
					arrowLine: true,
					borderColor:"#214FA2",
					borderWidth:2
				}];
				let concat = arr.concat(_self.markers);
				this.marker = concat;
			},
			clean:function() {
				this.type = "";
			}
		}
	}
</script>

<style>
	.maps {
		height: 40vh;
		width: 100%;
	}

	.route-margin-left {
		margin-left: 50px;
	}
	
	.font {
		font-size: 13px;
	}

	.transport {
		background: #FFFFFF;
		padding-left: 15px;
	}

	.transport-title {
		position: relative;
		display: inline-flex;
		padding: 2px 0px;
	}

	.transport-name text {
		font-size: 16px;
		color: #1C1C1C;
		font-weight: 600;
	}

	.triangle {
		position: relative;
		display: inline-flex;
		top: 7px;
	}

	.triangle_border_right {
		width: 0px;
		height: 0px;
		border-width: 6px 0px 6px 12px;
		border-style: solid;
		border-color: transparent transparent transparent rgba(153, 153, 153, 1);
		/*透明 透明 透明 灰*/
		margin: 0px 10px;
	}

	.tags {
		position: relative;
		display: inline-flex;
		-webkit-align-items: center;
	}

	.bus-padding {
		padding-left: 20%;
	}

	.tags .text {
		margin-right: 10px;
		color: #666666;
	}

	.route-detail {
		margin-top: 10px;
		height: 55vh;
	}

	.bus-plate {
		font-size: 16px;
		font-weight: 600;
	}

	.bus-route {
		margin: 10px 0px;
		position: absolute;
		left: 10px;
	}

	.list .station-name {
		display: -webkit-box;
		height: 25px;
	}

	.bus-route .bus-list {
		margin-left: 20px;
		position: relative;
	}

	.frame {
		position: relative;
		background: #FFFFFF;
		box-sizing: border-box;
		border-radius: 8px;
		padding-left: 10%;
		margin: 5px 10px;
		height: 100px;
	}
	
	.start-title:before {
		content: "";
		width: 1px;
		height: 50px;
		position: absolute;
		border-left: 3px dashed #ccc;
		margin: 20px 5px;
	}

	.start-title .greencircle:after {
		content: '';
		display: -webkit-inline-box;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		z-index: 2;
	}

	.green:after {
		top: 13px;
		background: #43bba3;
	}

	.start-origin {
		font-size: 16px;
		font-weight: 600;
		color: #1C1C1C;
	}

	.top {
		padding-top: 10px;
	}

	.duration {
		display: block;
		color: #666666;
		font-size: 12px;
	}

	.font-height {
		display: block;
		line-height: 30px;
	}

	.end:before {
		content: "";
		width: 1px;
		height: 100%;
		position: absolute;
		top: -26px;
		border-left: 3px dashed #ccc;
	}

	.dot:after {
		content: '';
		background: #FFFFFF;
		position: relative;
		display: -webkit-inline-box;
		left: 5px;
		top: -5px;
		width: 3px;
		height: 3px;
		border-radius: 50%;
		z-index: 100;
	}

	.transit {
		position: relative;
		box-sizing: border-box;
		display: inline-block;
	}

	.transit-no {
		display: table;
		border: 2px solid #2896FF;
		border-radius: 10px;
		padding: 3px 9px;
		background: #2896FF;
		color: #FFFFFF;
		margin-bottom: 10px;
	}

	.transit-news {
		font-size: 12px;
		color: #666666;
		display: block;
		border-bottom: 0.5px solid #EEEEE0;
	}

	.via-num {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
	}

	.list-item {
		position: relative;
	}

	.list-item text {
		height: 20px;
		line-height: 20px;
		display: block;
	}
	
	.route-bus {
		position: relative;
	}

	.route-bus:before {
		content: "";
		height: 100%;
		position: absolute;
		margin-left: 23px;
		border-left: 7px solid #007AFF;
		z-index: 99;
	}
	.marginTop:before {
		margin-top: 15px;
	}
	.marginMinus:before {
		margin-top: -24px;
	}
	
	.route-left {
		padding-left:10px;
	}

	.route-site:before {
		content: "";
		height: 40%;
		position: absolute;
		border-left: 7px solid #007AFF;
		left: 38px;
		margin-top: -100px;
		z-index: 99;
	}
	.route-site-end:before {
		content: "";
		height: 70px;
		position: absolute;
		border-left: 7px solid #007AFF;
		left: 38px;
		margin-top: -55px;
		z-index: 99;
	}

	.dot-end:after {
		content: '';
		border-radius: 50%;
		width: 12px;
		height: 12px;
		position: absolute;
		display: block;
		margin-left: -28px;
		margin-top: -25px;
		background: #FFFFFF;
	}

	.bottom-title {
		background: #F0F0F0;
		border-bottom: 1px solid #E5E5E5;
		color: #6D6D72;
	}

	.bottom-content {
		display: flex;
		flex-wrap: wrap;
		padding: 0 35upx;
	}

	.bottom-content-box {
		margin: 5px 0px;
		flex-direction: column;
		width: 100%;
		height: 35px;
		line-height: 35px;
		border-bottom: 1px solid #E5E5E5;
	}

	.bottom-content-bus {
		position: relative;
		display: table;
		font-size: 15px;
		color: #000000;
		font-weight: 500;
	}

	.bottom-content-cealen {
		margin: 5px 0px;
		flex-direction: column;
		width: 100%;
		font-size: 18px;
		color: #000000;
		font-weight: 600;
	}

	.centre-container {
		margin: 10px 15px;
	}

	.start-title {
		padding: 10px 20px 5px 20px;
	}

	.route-font {
		color: #1C1C1C;
		font-size: 16px;
		font-weight: 600;
	}

	.route-padding {
		padding: 40px 20px 5px 50px;
	}

	.route-padding-left {
		padding-left: 20px;
	}
	.route-padding-bottom {
		padding: 0px 20px 5px 20px;
	}

	.conter-walking-top {
		background: #FFFFFF;
		border-radius: 10px;
	}

	.route-transport {
		padding-top: 10px;
	}

	.icon-rotate {
		width: 18px;
		height: 18px;
		position: absolute;
		left: 33px;
		z-index: 200;
		margin-top: 6px;
		display: block;
	}

	.route-roundes :after {
	    content: '';
		border-radius: 50%;
		width: 12px;
		height: 12px;
		background: #FF7E7C;
		display: -webkit-inline-box;
	}

	.end-title {
		padding: 0px 20px 5px 20px;
	}

	.end-title:before {
		content: "";
		height: 45px;
		position: absolute;
		border-left: 3px dashed #ccc;
		margin-left: 5px;
		margin-top: -38px;
		z-index:1;
	}

	.triangle_border_down {
		width: 0;
		height: 0;
		border-width: 10px 7px 0;
		border-style: solid;
		border-color: #FFFFFF transparent transparent;
		/*灰 透明 透明 */
		display: inline-block;
		margin-left: 7px;
	}
</style>
